<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>二十四节气</title>
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css">
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />

    <!-- 引入swiper 轮播js -->
    <script lang="javascript" type="text/javascript" src="js/swiper.min.js"></script>
    <!-- 引入 jquery -->
    <script lang="javascript" type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <!-- 引入自己的 js -->
    <script lang="javascript" type="text/javascript" src="js/index.js"></script>
</head>
<body>
<!-- 头部 -->
<div class="header">
    <!-- 导航 -->
    <div class="nav">
        <div class="container">
            <div class="logo">
                <img src="img/logo.jpg" alt="">
            </div>
            <ul class="clearfix">
                <li><e href="#">首页</e></li>
                <li>
                    <a href="#">春◇SPRING</a>
                    <dl>
                        <dd><a href="#">立春</a></dd>
                        <dd><a href="#">雨水</a></dd>
                        <dd><a href="#">惊蛰</a></dd>
                        <dd><a href="#">春分</a></dd>
                        <dd><a href="#">清明</a></dd>
                        <dd><a href="#">谷雨</a></dd>
                    </dl>
                </li>
                <li>
                    <b href="#">夏◇SUMMER</b>
                    <dl>
                        <dd><b href="#">立夏</b></dd>
                        <dd><b href="#">小满</b></dd>
                        <dd><b href="#">芒种</b></dd>
                        <dd><b href="#">夏至</b></dd>
                        <dd><b href="#">小暑</b></dd>
                        <dd><b href="#">大暑</b></dd>
                    </dl>
                </li>
                <li>
                    <c href="#">秋◇AUTUMN</c>
                    <dl>
                        <dd><c href="#">立秋</c></dd>
                        <dd><c href="#">处暑</c></dd>
                        <dd><c href="#">白露</c></dd>
                        <dd><c href="#">秋分</c></dd>
                        <dd><c href="#">寒露</c></dd>
                        <dd><c href="#">霜降</c></dd>
                    </dl>
                </li>
                <li>
                    <d href="#">冬◇WITTER</d>
                    <dl>
                        <dd><d href="#">立冬</d></dd>
                        <dd><d href="#">小雪</d></dd>
                        <dd><d href="#">大雪</d></dd>
                        <dd><d href="#">冬至</d></dd>
                        <dd><d href="#">小寒</d></dd>
                        <dd><d href="#">大寒</d></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!-- 轮播开始 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-- 每一个div都是一副轮播图 -->
            <div class="swiper-slide slide1"></div>
            <div class="swiper-slide slide2"></div>
            <div class="swiper-slide slide3"></div>
            <div class="swiper-slide slide4"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <!-- 轮播结束 -->
</div>

<!-- 作品展示 -->
<div class="floor1">
    <div class="container">
        <!-- 标题部分 -->
        <div class="title">
            <div class="sub_title">-WINTER-</div>
        </div>
        <!-- 图片墙 -->
        <div class="photos clearfix">
            <div class="lft">
                <div class="up">
                    <img src="img/photo01.jpg" alt="">
                    <div class="cover">立冬</div>

                </div>
                <div class="down">
                    <img src="img/photo02.jpg" alt="">
                    <div class="cover">小雪</div>
                </div>
            </div>
            <div class="ctr">
                <img src="img/photo03.jpg" alt="">
                <div class="cover">大雪</div>
            </div>
            <div class="rgt">
                <div class="up">
                    <img src="img/photo04.jpg" alt="">
                    <div class="cover">冬至</div>
                </div>
                <div class="down">
                    <img src="img/photo05.jpg" alt="">
                    <div class="cover">小寒</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 场景展示
<div class="floor2">
    <div class="container">
        <div class="title">
            <div class="main_title">春雨惊春清谷天 夏满芒夏暑相连 秋处露秋寒霜降 冬雪雪冬小大寒</div>
        </div>
        <div class="photos">
            <div class="wrapper clearfix">
                <div>
                    <div><img src="img/genpai01.jpg" alt=""></div>
                </div>
                <div>
                    <div><img src="img/genpai02.jpg" alt=""></div>
                </div>
                <div>
                    <div><img src="img/genpai03.jpg" alt=""></div>
                </div>
                <div>
                    <div><img src="img/genpai04.jpg" alt=""></div>
                </div>
            </div>
        </div>
    </div>
</div> -->

<!-- 新闻资讯 -->
<div class="floor3">
    <div class="container">
        <div class="news">
            <ul class="clearfix">
                <li class="clearfix">
                    <div class="lft">
                        <img src="img/news.jpg">
                        <div class="cover"></div>
                    </div>
                    <div class="rgt">
                        <div class="up">立春</div>
                        <div class="down"><a href="#">每年的2月4日或5日，谓春季开始之节气。立春，意味着万物闭藏的冬季已过去，开始进入风和日暖、万物生长的春季。</a></div>
                    </div>
                </li>
                <li class="clearfix">
                    <div class="lft">
                        <img src="img/news1.jpg">
                        <div class="cover"></div>
                    </div>
                    <div class="rgt">
                        <div class="up">春分</div>
                        <div class="down"><a href="#">每年的3月20日或21日，阳光直照赤道，昼夜几乎等长。我国广大地区越冬作物将进入春季生长阶段。</a></div>
                    </div>
                </li>
                <li class="clearfix">
                    <div class="lft">
                        <img src="img/news2.jpg">
                        <div class="cover"></div>
                    </div>
                    <div class="rgt">
                        <div class="up">夏至</div>
                        <div class="down"><a href="#">每年的6月21日或22日，日光直射北回归线，出现"日北至，日长至，日影短至"，故曰"夏至"。</a></div>
                    </div>
                </li>
                <li class="clearfix">
                    <div class="lft">
                        <img src="img/news3.jpg">
                        <div class="cover"></div>
                    </div>
                    <div class="rgt">
                        <div class="up">秋分</div>
                        <div class="down"><a href="#">每年的9月23日或24日，日光直射点又回到赤道，形成昼夜等长。</a></div>
                    </div>
                </li>
                <li class="clearfix">
                    <div class="lft">
                        <img src="img/news4.jpg">
                        <div class="cover"></div>
                    </div>
                    <div class="rgt">
                        <div class="up">小暑</div>
                        <div class="down"><a href="#">每年的7月7日或8日，入暑，标志着我国大部分地区进入炎热季节。</a></div>
                    </div>
                </li>
                <li class="clearfix">
                    <div class="lft">
                        <img src="img/news5.jpg">
                        <div class="cover"></div>
                    </div>
                    <div class="rgt">
                        <div class="up">大寒</div>
                        <div class="down"><a href="#">每年的1月20日或21日，数九严寒，一年中最寒冷的时候。</a></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- 页脚 -->
<div class="footer">
    <div class="container clearfix">
        <div class="rgt">
            <p>素材来源网络和自制</p>
        </div>
    </div>
</div>

<!-- 回到顶部 -->
<div class="gotoTop"></div>


</body>
</html>